<template>
  <div class="organization-container ">
    <el-tabs v-model="activeTab" type="card" class="organization-tabs">
      <el-tab-pane label="集团设置" name="group">
        <group-setting v-if="activeTab === 'group'" />
      </el-tab-pane>
      <el-tab-pane label="公司设置" name="company">
        <company-setting v-if="activeTab === 'company'" />
      </el-tab-pane>
      <el-tab-pane label="部门管理" name="department">
        <department-management v-if="activeTab === 'department'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onBeforeUnmount } from 'vue'

// 异步加载各个组件
const GroupSetting = defineAsyncComponent(() => import('./group/index.vue'))
const CompanySetting = defineAsyncComponent(() => import('./company/index.vue'))
const DepartmentManagement = defineAsyncComponent(() => import('./department/index.vue'))

// 当前激活的标签页
const activeTab = ref('group')

// 页面销毁前清理资源
onBeforeUnmount(() => {
  // 清理相关资源
})
</script>

<style lang="scss" scoped>
.organization-container {
  .organization-tabs {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }
    
    :deep(.el-tabs__content) {
      min-height: 500px;
    }
  }
}
</style> 